/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-27 16:32:13
 * @LastEditTime: 2022-04-28 11:24:15
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import { nanoid } from 'nanoid';

import React from 'react';
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';

import './App.css'

export default class App extends React.Component {
  state = {
    list: []
  }
  handleSubmit = (v) => {
    if (v !== '') {
      this.setState({ list: [{ id: nanoid(), content: v, state: false }, ...this.state.list] })
    }
  }
  handleDelete = (id) => {
    this.setState({
      list: this.state.list.filter(item => item.id !== id)
    })
  }
  handleFinish = (id, state) => {
    this.setState({
      list: this.state.list.map((item) => {
        if (item.id === id) return { ...item, state }
        else return item

      })
    })
  }
  clearFinish = () => {
    this.setState({
      list: this.state.list.filter(item => item.state !== true)
    })
  }
  selectAll = (state) => {
    this.setState({
      list: this.state.list.map(item => {
        return { ...item, state }
      })
    })

  }
  render() {
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header onSubmit={this.handleSubmit} />
          <List data={this.state.list} onDelete={this.handleDelete} onFinish={this.handleFinish} />
          <Footer onClear={this.clearFinish} onSelectAll={this.selectAll} allNumber={this.state.list.length} finishNumber={this.state.list.filter(item => item.state !== false).length} />
        </div>
      </div>
    )
  }
}
